<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        body{
            margin:0px;
        }
        #cesiumContainer {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
    /**
     * 控件显隐开关
     */
    var viewer = new Cesium.Viewer("cesiumContainer", {
        geocoder: false,
        homeButton: false,
        sceneModePicker: false, //是否显示投影方式控件
        baseLayerPicker: true,  //是否显示图层选择控件
        navigationHelpButton: false, //是否显示帮助信息控件
        geocoder:false, //是否显示地名查找控件
        animation: false, //是否显示动画控件
        timeline: false, //是否显示时间线控件
        fullscreenButton: false,
        vrButton: false,
        shadows: true, //影子
        infoBox: true //是否显示点击要素之后显示的信息
    });
    /**
     * 地图加载
     */
    viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[3];
    // let data = {
    //     "墙":['Source/mode/墙/12/100/1_12_4_ver649abb27.json',2.10262649563823,0.558451526364786,2.102629689712196,0.5584537367373,-4,-0.050000115203857],
    //     "家具":['Source/mode/家具/26/100/1_26_14_ver649abb27.json',2.102628114928261,0.558452769607365,2.102629637214958,0.558453688274276,-3.520000010728836,-1.519999995470047],
    //     "楼板":['Source/mode/楼板/9/100/1_9_2_ver649abb27.json',2.102627562216797,0.558452630332543,2.102628642688929,0.558452742901386,-4,-3.674999997520447],
    //     "窗":['Source/mode/窗/23/100/1_23_12_ver649abb27.json',2.10262649563823,0.558451526364786,2.102629689712196,0.5584537367373,-4.150000001144409,0.100000031280517],
    //     "门":['Source/mode/门/19/100/1_19_10_ver649abb27.json',2.102627562216797,0.558452630332543,2.102628642688929,0.558452742901386,-4,-3.674999997520447]
    // }
    // let data = {
    //     "墙":['Source/mode/test/tileset.json',2.10262649563823,0.558451526364786,2.102629689712196,0.5584537367373,-4,-0.050000115203857]
    // }
    let data = {
        "墙":['Source/mode/huanbohai/tileset.json',2.10262649563823,0.558451526364786,2.102629689712196,0.5584537367373,-4,-0.050000115203857]
    }
    // let data = {
    //     "1":['Source/mode/test1/tileset.json',2.10262649563823,0.558451526364786,2.102629689712196,0.5584537367373,-4,-0.050000115203857],
    //     "2":['Source/mode/test/tileset.json',2.10262649563823,0.558451526364786,2.102629689712196,0.5584537367373,-4,-0.050000115203857]
    // }
    addModel()

    /**
     * 加载切片模型
     */
    function addModel(){
        for (const Key in data) {
            //加载倾斜示范数据
            var palaceTileset = new Cesium.Cesium3DTileset({
                url: data[Key][0],
                //控制切片视角显示的数量，可调整性能
                maximumScreenSpaceError: 2,
                maximumNumberOfLoadedTiles: 100000,
            })
            //控制模型的位置
            palaceTileset.readyPromise.then(function (palaceTileset) {
                //添加到场景
                let tileset = viewer.scene.primitives.add(palaceTileset);
                // 聚焦
                viewer.zoomTo(tileset);
                // var longitude = 2.10262649563823 //模型需要改变的经度
                // var latitude = 0.558451526364786 //模型需要改变的纬度
                // var heightOffset = 20; //模型需要改变的高度

                //获取3Dtlies的bounds范围
                var boundingSphere = palaceTileset.boundingSphere;
                //获取3Dtlies的范围中心点的弧度
                var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
                //定义3Dtlies改变之后中心点的弧度
                var offsetvalue = Cesium.Cartographic.fromDegrees(longitude, latitude, heightOffset)

                debugger
                //模型本身的位置
                var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
                //模型改变的位置
                var offset = Cesium.Cartesian3.fromRadians(offsetvalue.longitude, offsetvalue.latitude, heightOffset);

                //定义模型的改变状态
                var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
                //修改模型的位置
                palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
                viewer.zoomTo(palaceTileset, new Cesium.HeadingPitchRange(0.5, -0.2, palaceTileset.boundingSphere.radius *
                    1.0));
            });
        }
    }
    // 高亮元素
    // const hightLighted = {
    //     feautre: undefined,
    //     originalColor: new Cesium.Color(),
    // }
    // viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(event) {
    //     console.log("查看模型信息", event)
    //     // 清除之前的高亮元素
    //     if (Cesium.defined(hightLighted.feature)) {
    //         hightLighted.feature.color = hightLighted.originalColor;
    //         hightLighted.feature = undefined;
    //     }
    //     // 选择新要素
    //     const pickedFeature = viewer.scene.pick(event.position);
    //     if (!Cesium.defined(pickedFeature)) {
    //         return;
    //     }
    //     // 存储选中要素的信息
    //     hightLighted.feature = pickedFeature;
    //     Cesium.Color.clone(
    //         pickedFeature.color,
    //         hightLighted.originalColor
    //     );
    //     // 高亮选中元素
    //     pickedFeature.color = Cesium.Color.YELLOW;
    // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

</script>
</body>
</html>